<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Merry Christmas</title>
  <style>
    body {
      background-color: #000;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }

    body,
    html {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    svg {
      width: 90%;
      height: 90%;
      visibility: hidden;
    }

    .sparkle {
      /* mix-blend-mode:luminosity */
    }

    body {
      margin: 0;

      text-align: center;
      padding: 0;

      line-height: 2em;

      font-family: "Times New Roman", Times, serif;

      color: #000000;
    }

    #header {
      /* position: absolute; */
      text-align: center;
      color: #C89568;
      font-family: Times New Roman;
      font-size: 35px;
      min-width: 400px;
      max-height: 100vh;
    }

    .header-item {
      opacity: 0;
      transition: all .5s ease-in-out;
      line-height: 1.5;
      margin: 0;
    }

    .header-item.show {
      opacity: 1;
    }

    #treeStarOutline {
      opacity: 0;
    }

    #mask {
      position: absolute;
      background-color: #000;
      width: 100%;
      height: 100%;
      font-size: 15rem;
      animation: shack 0.4s ease-in-out infinite;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      /* display: none; */
    }

    canvas {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    @keyframes shack {
      0% {
        transform: rotate(0);
      }

      25% {
        transform: rotate(-10deg);
      }

      50% {
        transform: rotate(0);
      }

      75% {
        transform: rotate(10deg);
      }

      100% {
        transform: rotate(0);
      }
    }

    #stars {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
  </style>
</head>

<body>
  <div>
    <audio controls="controls" preload="auto" src="./img/music.mp3" hidden id="music1">
    </audio>
  </div>
  <div id="mask">🎁</div>
  <canvas id="stars"></canvas>
  <div class="main">
    <!-- partial:index.partial.html -->
    <svg class="mainSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 800 600">
      <defs>
        <circle id="circ" class="particle" cx="0" cy="0" r="1" />
        <polygon id="star" class="particle"
          points="4.55,0 5.95,2.85 9.1,3.3 6.82,5.52 7.36,8.65 4.55,7.17 1.74,8.65 2.27,5.52 0,3.3 3.14,2.85 " />
        <polygon id="cross" class="particle"
          points="4,3.5 2.5,2 4,0.5 3.5,0 2,1.5 0.5,0 0,0.5 1.5,2 0,3.5 0.5,4 2,2.5 3.5,4 " />
        <path id="heart" class="particle" d="M2.9,0C2.53,0,2.2,0.18,2,0.47C1.8,0.18,1.47,0,1.1,0C0.49,0,0,0.49,0,1.1
	C0,2.6,1.56,4,2,4s2-1.4,2-2.9C4,0.49,3.51,0,2.9,0z" />

        <radialGradient id="grad" cx="3" cy="3" r="6" gradientUnits="userSpaceOnUse">
          <stop offset="0" style="stop-color: red" />
          <stop offset="0.4" style="stop-color: #334673" />
          <stop offset="0.6" style="stop-color: hsl(37, 53%, 85%)" />
          <stop offset="0.9" style="stop-color: #fee8c7" />
          <stop offset="1" style="stop-color: red" />
        </radialGradient>
        <radialGradient id="dotGrad" cx="0" cy="0" r="50" gradientUnits="userSpaceOnUse">
          <stop offset="0" style="stop-color: #ffffff; stop-opacity: 1" />
          <stop offset="0.1" style="stop-color: #0867c7; stop-opacity: 0.6" />
          <stop offset="1" style="stop-color: #081029; stop-opacity: 0" />
        </radialGradient>

        <mask id="treePathMask">
          <path class="treePathMask" fill="none" stroke-width="18" stroke="#FFF" d="M252.9,447.9c0,0-30.8-21.6,33.9-44.7c64.7-23.1,46.2-37,33.9-41.6
    c-12.3-4.6-59.3-11.6-42.4-28.5s114-52.4,81.7-66.2c-32.4-13.9-58.5-10.8-35.4-29.3s66.2-101.7,70.9-115.6
    c4.4-13.2,16.9-18.5,24.7,0c7.7,18.5,44.7,100.1,67.8,115.6c23.1,15.4-10.8,21.6-26.2,24.7c-15.4,3.1-20,33.9,33.9,49.3
    c53.9,15.4,47.8,40.1,27.7,44.7c-20,4.6-63.2,4.6-27.7,32.4s98.6,21.6,61.6,60.1" />
        </mask>
        <mask id="treeBottomMask">
          <path class="treeBottomMask" stroke="#FFF" stroke-width="8"
            d="M207.5,484.1c0,0,58.5-43.1,211.1-3.1s191-16.9,191-16.9" />
        </mask>
        <mask id="treePotMask">
          <path class="treePotMask" stroke="#FFF" stroke-width="8"
            d="M374.3,502.5c0,0-4.6,20,7.7,29.3c12.3,9.2,40.1,7.7,50.8,0s10.8-23.1,10.8-29.3" />
        </mask>

        <filter id="glow" x="-150%" y="-150%" width="280%" height="280%">
          <feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" />
          <feGaussianBlur in="offOut" stdDeviation="16" result="blur" />

          <feComponentTransfer>
            <feFuncR type="discrete" tableValues="0.8" />
            <feFuncG type="discrete" tableValues="0.3" />
            <feFuncB type="discrete" tableValues="0.2" />
            <!--<feFuncA type="linear" slope="1" intercept="0" />-->
          </feComponentTransfer>

          <feComposite in="SourceGraphic" operator="over" />
        </filter>
      </defs>
    </svg>
    <h1 id="header"></h1>
  </div>
  <!-- partial -->
  </script>
</body>
<canvas id="canvas"></canvas>

<script type="text/javascript">
  const colors = [
    "#eec996",
    "#8fb7d3",
    "#b7d4c6",
    "#c3bedd",
    "#f1d5e4",
    "#cae1d3",
    "#d0b0c3",
    "#819d53",
    "#c99294",
    "#cec884",
    "#ff8e70"
  ] //用来设置的颜色
  const texts = [
    "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
    , "谢莹莹"
  ]
  var canvas = document.getElementById("canvas")
  var ctx = canvas.getContext("2d")
  let count = 1

  var ww = window.innerWidth
  var wh = window.innerHeight

  var hearts = []

  function init () {
    requestAnimationFrame(render)
    canvas.width = ww
    canvas.height = wh
    for (var i = 0; i < 100; i++) {
      hearts.push(new Heart())
    }
  }

  function Heart () {
    this.x = Math.random() * ww
    this.y = Math.random() * wh
    this.opacity = Math.random() * 0.5 + 0.5
    this.vel = {
      x: (Math.random() - 0.5) * 4,
      y: (Math.random() - 0.5) * 4,
    }
    this.targetScale = Math.random() * 0.15 + 0.02
    this.scale = this.targetScale * Math.random()
  }

  Heart.prototype.update = function (i) {
    this.x += this.vel.x
    this.y += this.vel.y

    this.scale += (this.targetScale - this.scale) * 0.01
    if (this.x - this.width > ww || this.x + this.width < 0) {
      this.scale = 0
      this.x = Math.random() * ww
    }
    if (this.y - this.height > wh || this.y + this.height < 0) {
      this.scale = 0
      this.y = Math.random() * wh
    }
    this.width = 473.8
    this.height = 408.6
  }
  Heart.prototype.draw = function (i) {
    ctx.globalAlpha = this.opacity
    ctx.font = `${180 * this.scale}px "微软雅黑"`
    ctx.fillStyle = colors[i % colors.length]
    ctx.fillText(
      texts[i % texts.length],
      this.x - this.width * 0.5,
      this.y - this.height * 0.5,
      this.width,
      this.height
    )
  }

  function render () {
    ctx.clearRect(0, 0, ww, wh)
    for (var i = 0; i < 100; i++) {
      hearts[i].update(i)
      hearts[i].draw(i)
    }
    requestAnimationFrame(render)
  }
  init()

  window.addEventListener("resize", function () {
    ww = window.innerWidth
    wh = window.innerHeight
  });
</script>
<script>
  select = function (s) {
    return document.querySelector(s)
  },
    selectAll = function (s) {
      return document.querySelectorAll(s)
    },
    pContainer = select(".pContainer"),
    mainSVG = select(".mainSVG"),
    star = select("#star"),
    sparkle = select(".sparkle"),
    tree = select("#tree"),
    showParticle = true,
    particleColorArray = [
      "#E8F6F8",
      "#ACE8F8",
      "#F6FBFE",
      "#A2CBDC",
      "#B74551",
      "#5DBA72",
      "#910B28",
      "#910B28",
      "#446D39",
    ],
    particleTypeArray = ["#star", "#circ", "#cross", "#heart"],
    // particleTypeArray = ['#star'],
    particlePool = [],
    particleCount = 0,
    numParticles = 201
  let myLabels = [
    "谢",
  ]

  function init () {
    let element = document.getElementById("header")
    for (let i = 0; i < myLabels.length; i++) {
      let _p = document.createElement("p")
      _p.className = "header-item"
      _p.innerHTML = myLabels[i]
      element.appendChild(_p)
    }

    let labels = document.getElementsByClassName('header-item')
    for (let i = 0; i < myLabels.length; i++) {
      setTimeout(() => {
        labels[i].classList.add("show")
      }, 1000 * i)
    }
  }
  let init_flag = false
  window.onclick = function () {
    var audio = document.getElementById('music1')
    function hh () {
      audio.currentTime = 14
      audio.play()
      window.open('https://ccymax.gitee.io/demo/yanhua.html')
    }
    hh()
  }

</script>

</html>